<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Onboarding</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="onboarding">
    <div class="slider">
      <div class="slide">
        <h1>Communicate</h1>
        <!--       <img src="https://s9.postimg.org/i65ness8f/chat-bubbles.png" alt="chat bubbles"> -->
        <div class="img chat-bubbles"></div>
        <p>Communicate with friends using a convenient chat</p>
      </div>
      <div class="slide">
        <h1>Mind Battles</h1>
        <!--       <img src="https://s9.postimg.org/7qzh5k2nz/swords.png" alt="swords"> -->
        <div class="img swords"></div>
        <p>Fight with other players in daily intellectual battles</p>
      </div>
      <div class="slide">
        <h1>Learn</h1>
        <!--       <img src="https://s9.postimg.org/l7wfosv3j/brain-bulb.png" alt="brain bulb"> -->
        <div class="img brain-bulb"></div>
        <p>Perform tasks, get cool bonuses, ranks and awards</p>
      </div>
    </div>
    <div class="controls">
      <form>
        <input type="radio" name="page" checked>
        <label for="page"></label>
        <input type="radio" name="page">
        <label for="page"></label>
        <input type="radio" name="page">
        <label for="page"></label>
      </form>
      <a href="#" class="btn-next">Next</a>
    </div>
  </div>

  <!-- <div class="thumbnail">
  <a href="https://codepen.io/enahom99/full/EEgPQP/">
    <img src="" alt="">
  </a>
</div> -->


  <div class="toast">View in <a href="https://codepen.io/enahom99/full/EEgPQP/" target="_blank">Full Page</a></div>
  <!-- partial -->
  <script src="./script.js"></script>

</body>

</html>